import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router'
import mobiscroll from "mobiscroll"
import { applyRouterMiddleware, browserHistory, Router } from 'react-router';
import { useScroll } from 'react-router-scroll';
import { ScrollContainer } from 'react-router-scroll';
import {routes} from '../app/routes'
import './assets/iscroll-list.less'
@connect(
	state => {
		return {
			list: state.list || {}
		}
	}
)
@withRouter
export default class List extends Component {

	static propTypes = {}
  
  constructor(props){
    super(props);
    this.state = {
      loading: false
    }
    this.goDetail = this.goDetail.bind(this)
  }

	render() {
    var datas = this.props.list.items?this.props.list.items:[]
    console.log(this.state.loading)
		return (
     <div className='list'>
     
      <div className='iscroll-list'>
      
          {
            <div className='md-sorthandle'>
            <div className='mbsc-lv-cont mbsc-lv-mobiscroll mbsc-lv-ic-anim mbsc-lv-handle-right'>
              {
                  <div className='mbsc-lv-sl-c'>
                  <ul className='mbsc-comp mbsc-lv mbsc-lv-v mbsc-lv-root mbsc-lv-sl-curr'>
                  
                {
                  datas&&datas.map((data,index)=>{
                    return(
                      <div key={index}>
                        <li className='mbsc-lv-item mbsc-lv-img-left mbsc-lv-item-enhanced' onClick={this.detail.bind(this)}>
                          <img src={data.logo} className='mbsc-lv-img'/>
                          <h3 className='mbsc-lv-txt'>{data.name}</h3>
                          <p className='mbsc-lv-txt'>{data.phone}</p>
                          <div className='mbsc-lv-handle-c mbsc-lv-item-h-right mbsc-lv-handle'>
                            <div className=' mbsc-lv-handle-bar-c mbsc-lv-handle'>
                              <div className='mbsc-lv-handle-bar mbsc-lv-handle'></div>
                              <div className='mbsc-lv-handle-bar mbsc-lv-handle'></div>
                              <div className='mbsc-lv-handle-bar mbsc-lv-handle'></div>
                            </div>
                          </div>
                        </li>
                      </div>
                    )
                  })
                }
                </ul>
              </div>
                }
          </div>
          </div>
          }
         
      </div>
     </div>
		);
	}

  detail=()=>{
    this.setState({loading:true},function(){
   // document.body.classList.add('disabled')
    this.props.dispatch({
      type:"app/loading",
      payload:{
        loading:true
      }
    })
     window.setTimeout(this.goDetail,3000);
    })
  }

  goDetail=()=>{
    this.props.dispatch({
      type:"app/loading",
      payload:{
        loading:false
      }
    })
    //document.body.classList.remove('disabled')
    this.props.router.push("/detail");
  }


}
